<script setup>
import router from '@/router'

defineProps({
  goods: Object
})

const navigateToDetail = goods_id => {
  router.push(`/goods-detail?id=${goods_id}`)
}
</script>

<template>
  <div class="goods-card">
    <img :src="goods?.imgUrl" :title="goods?.name" @click="navigateToDetail(goods?.id)" />
    <p>{{ goods?.name }}</p>
    <p class="price">￥{{ goods?.price }}</p>
  </div>
</template>

<style scoped>
.goods-card {
  width: 300px;
  height: 360px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;

  img {
    width: 100%;
    cursor: pointer;
  }

  .price {
    color: rgb(169, 152, 143);
  }
}
</style>
